<template>
	
	<view>
		
			<w-popup v-model="show" ref="el" :z-index="1200" :height="1200"  >
			   
			     <view class="container" >
			       <form @submit="submitOrder"   >
					   <view class="form-group">
						   <text>订单创建时间：</text>
						   <view class="example-body">
						   	<uni-datetime-picker type="datetime" :start="start" :end="end" v-model="datetimeString" @change="change" />
						   </view>
					   </view>
					   
			         
			   	  <view class="form-group">
			   	    <text>客户姓名：</text>
			   	    <input 
		style="height: 60rpx;
		background-color: #fff;
		border-radius: 15rpx;" type="text" />
			   	  </view>
			   	  <view class="form-group">
			   	    <text>客户电话：</text>
			   	    <input  
					style="height: 60rpx;
		background-color: #fff;
		border-radius: 15rpx;"
					type="text" />
			   	  </view>
			   	  <view class="form-group">
			   	    <text>地址：</text>
			   	    <input 
					style="height: 60rpx;
		background-color: #fff;
		border-radius: 15rpx;"
					type="text" />
			   	  </view>
			   	  <view class="form-group">
			   	    <text>合作方：</text>
			   	    <input 
					 style="height: 60rpx;
		background-color: #fff;
		border-radius: 15rpx;"
					 
					 type="text" />
			   	  </view>
			         <view class="form-group">
			           <text>定金金额：</text>
			           <input 
						style="height: 60rpx;
		background-color: #fff;
		border-radius: 15rpx;"
						type="number" />
			         </view>
			         <view class="form-group">
			           <text>合同金额：</text>
			           <input 
						style="height: 60rpx;
		background-color: #fff;
		border-radius: 15rpx;"
						type="number" />
			         </view>
			         <view class="form-group">
			           <text>售后补单编号:</text>
			           <input 
						style="height: 60rpx;
		background-color: #fff;
		border-radius: 15rpx;"
						type="text" />
			         </view>
			         <button type="submit" style="font-size: 34rpx; font-weight: 900; border-radius: 15rpx; background-color: rgba(85, 170, 255, 1); color: #fff;">提交订单</button>
			       </form>
			     </view>
			  
			   
			</w-popup>
		
		
		
			 <zero-custom-bar backgroundColor="rgba(255,255,255,0.5)">
			        <view class="lefticon" slot='left' >
			            <button   border="0px" width="10rpx" @click="showDrawer" ><uni-icons type="bars"></uni-icons></button>
			        </view>
			        <view class="" >
			            <h3>订单管理</h3>
			        </view>
					<view class="righticon" slot='right' >
					    <button style="background-color: #f8f8f8;"  @click="show = true" >新增订单</button>
					</view>
			        </zero-custom-bar>
			
			<genos-drawer  ref="showleft" mode="left" :mask-click="false" statusBar="true">
				
					<button class="closebutton" @click="closeDrawer" type="primary"><icon type="clear"></icon></button>
					<navigator url="/pages/order/myOrder/index/index"><view class="list-item"><button >我的订单</button></view></navigator>
					<navigator url="/pages/order/departmentorder/index/departmentorder"><view class="list-item"><button>部门订单</button></view></navigator>
				    <navigator url="/pages/sys/user/index" open-type="switchTab"><view class="list-item"><button>个人中心</button></view></navigator>
			</genos-drawer>
			
			
			<view class="out"> 
			<view class="row" v-for="item in jsonData" :key="item.orderId" :class="{rowed:getShowFlag(item.orderId)}">
					<view class="btn2" ><image  @click="deleteDate(item)" style="width: 30px;height: 30px;" src="../../../../static/jeesite/垃圾桶.png"></image></view>
					<view class="item">
						<view  class="dingdan-msg" :class="{active:getShowFlag(item.orderId)}">
						<view class="title"><input  style="width: fit-content;" class="detailcontent" :class="{editinput:!getEditOrder(item.orderId)}" placeholder="请输入客户姓名" :name="item.clientName" v-model="item.clientName" :disabled="getEditOrder(item.orderId)"></view>
						<view class="title">下单时间：{{item.createTime}}</view>
						<view class="title">订单状态：{{item.orderStatus}}</view>
						<view class="title">是否延期：{{item.delayed}}</view>
						<view class="title">联系电话：<input style="width: fit-content;" class="detailcontent" :class="{editinput:!getEditOrder(item.orderId)}"  :name="item.phone" v-model="item.phone" :disabled="getEditOrder(item.orderId)"></view>    
						<view class="title">预估金额：<input style="width: fit-content;" class="detailcontent" :class="{editinput:!getEditOrder(item.orderId)}"  :name="item.estimatedAmount" v-model="item.estimatedAmount" :disabled="getEditOrder(item.orderId)"></view>
						<view class="title">是否有售后：<input style="width: fit-content;" class="detailcontent" :class="{editinput:!getEditOrder(item.orderId)}"   :name="item.afterSales" v-model="item.afterSales" :disabled="getEditOrder(item.orderId)"></view>
						<view class="title">售后补单编号：<input style="width: fit-content;" class="detailcontent" :class="{editinput:!getEditOrder(item.orderId)}"   :name="item.afterSalesOrder" v-model="item.afterSalesOrder" :disabled="getEditOrder(item.orderId)"></view>
						
						<view class="title">备注<span>(最多输入250字)</span>:
						<textarea maxlength="250" @input="riseInput" style="" class="detailcontent" :class="{editinput:!getEditOrder(item.orderId)}"   :name="item.comment" v-model="item.comment" :disabled="getEditOrder(item.orderId)"></textarea> 
						</view>
						<view class="btn1" :class="{editorder:!getEditOrder(item.orderId)}"><button  @click="editOrder(item.orderId)"><image src="../../../../static/jeesite/编辑文件.png" style="width: 30px;height: 30px;"></image>编辑订单</button></view>
						<view class="btn1" ><button   @click="updateDate(item)"  :class="{editorder:getEditOrder(item.orderId)}"><image src="../../../../static/jeesite/保存.png" style="width: 30px;height: 30px;"></image>保存订单</button></view>
						</view>
						
					</view>
					
						<view class="btn2" ><button style="background-color: #1951be; color: #f8f8f8;" @click = "showTag(item.orderId)" >{{flags[item.orderId]?"收起":"详情"}}</button></view>
						
						
					 
					 	
				
			　　　　
			</view>
			
					
				
				
			
			</view>		
		
			
		</view>
		
		
		
	</template>

<script>
import config from '../../../../common/config'
	export default {
		
		data() {
			return {
				show:false,
			   jsonData:[],
			   flags: [],
			   isflag: true,
			  isDisableds: [],
			  isDisabled: true
			}
		},
		onReady() {},
		methods: {
			//获取数据
			getData(){
				this.$u.api.order.listData1({
					"pageNo":1,
					"pageSize":10
				}).then((res)=>{
					console.log(res)
					this.jsonData = res.list
				})
			},
			deleteDate(item){
				this.$u.api.order.delete(item).then((e)=>{
					console.log(e)
				}),
				uni.reLaunch({
					url:"/pages/order/myOrder/index/index"
				})
			},
			
			updateDate(item){
				this.$u.api.order.update(item).then((e)=>{
					console.log(e)
					uni.reLaunch({
						url:"/pages/order/myOrder/index/index"
					})
					
				})
			},
			
			
			
			
			getEditOrder(id){
				
			console.log("id"+id)
			
			//如果没有定义，就不显示
			if(this.isDisableds[id]!=undefined&&this.isDisableds[id]==false){
				this.isDisableds[id] = false;
							
				return false;
				
			     
			}else{
				  this.isDisableds[id] = true;
				  return true;
			}
			
			
			
			
			
			
			
			},
			toAddOrder(){
				uni.navigateTo({
					url:"/pages/order/addmyorder/addmyorder"
				})
			},
			
			
			getShowFlag(id){
				console.log("id"+id)
				
				//如果没有定义，就不显示
				if(this.flags[id]!=undefined&&this.flags[id]==true){
					
                     this.flags[id] = true;
                     return true;
				}else{
					  this.flags[id] = false;
				
					return false;
				}
			},
			showDrawer() {
				this.$refs.showleft.open();
			},
			closeDrawer() {
				this.$refs.showleft.close();
			},
			
		onLoad() {
			this.getData()
		},
		
		 showTag(e){
		
			  let flag =  this.getShowFlag(e)
			  
			  if(flag == true){
				  //
				  this.flags[e]=false;
			
			  }else{
				  this.flags[e]=true;
			  }
			  
			  //强制刷新
			this.$forceUpdate()

			  
			if(this.isflag == false){
				console.log("aaa")
			}	
				
			}, 
		
		editOrder(e){
			
			let isdisabled =  this.getEditOrder(e)
			  
			  if(isdisabled == true){
				  //
				  this.isDisableds[e]=false;
			
			  }else{
				  this.isDisableds[e]=true;
			  }
			  
			  //强制刷新
			this.$forceUpdate()
			
			  
			if(this.isDisabled == false){
				console.log("aaa")
			}	
			
			
			
		},
		
		getinfo(){
			  
		  },
		submitOrder() {
		  // 在这里你可以发送订单到服务器的逻辑
		  // 使用uni.request或其他适当的方法发送订单数据
		  // 处理服务器响应并提供适当的用户反馈
		}
		
	},
	
}
</script>

<style>
page {
		background-color:#e8e7f2;
	}
	

textarea{
	
	 width:90%;/*自己主动适应父布局宽度*/
	 overflow:auto;
	 word-break:break-all;
}
span{
	color: #888;
	font-size: 3rpx;
}
	
	.closebutton{
		margin-top: 100rpx;
		text-align: center;
		bottom: 10px;
		background-color: darkred;
		
	}
	.list-item{
		text-align: center;
		
		background-color: white;
		width: 100%;
		
	}
	
	
	.title{
		font-size: 15rpx;
		font-weight: 800;
		font-style: initial;
	}
	
.out{
	
	
	justify-content: center;
	align-items: center;
	height: 100rpx;
	
}
.out .row{
	width: auto;
	
	margin: 30px;
	box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
	border-radius: 15px;
	background-color: #e8e7f2;
	               
	border-top: rgba(255,255,255,0.5) 1px solid;
	border-left: rgba(255,255,255,0.5) 1px solid;
	backdrop-filter: blur(5px);
	
	
	white-space: nowrap;
	padding:20rpx 0;
	
}


.out .rowed{
	width: auto;
	
	margin: 30px;
	box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
	border-radius: 15px;
	background-color: rgba(85, 170, 255, 0.6);
	               
	border-top: rgba(255,255,255,0.5) 1px solid;
	border-left: rgba(255,255,255,0.5) 1px solid;
	backdrop-filter: blur(5px);
	
	
	white-space: nowrap;
	padding:20rpx 0;
	
}


.out .row .name{
	font-zize:50rpx;
	padding-bottom: 15rpx;
	color: #333;
}
.out .row .ordertime{
	font-size: 50rpx;
	color: #888;
}


/* 初始高度，超出隐藏 */
    .dingdan-msg{
        height: 200rpx;
        overflow: hidden;
        line-height: 50rpx;
        
		
		
		width:auto;
		
		margin: 30rpx;
		box-shadow: 20rpx 20rpx 50rpx rgba(0,0,0,0.5);
		border-radius: 15rpx;
		background-color: #e8e7f2;
		               
		border-top: rgba(255,255,255,0.5) 1px solid;
		border-left: rgba(255,255,255,0.5) 1px solid;
		backdrop-filter: blur(5px);
		transition: transform 0.3s ease;
    }
/*  高度自适应，全部显示 */
    .active{
        height: auto;
        overflow: visible;
		transition: transform 0.3s ease;
    }
	
	.editinput{
		
		border-radius: 10rpx;
		background-color:#fff;
	}

	.btn1 {
	 background-color: #e8e7f2;
	 color: #e8e7f2;
	 max-width: 250rpx;
	 cursor: pointer;
	 margin-bottom: 20rpx;
	 font-weight: 600;
	 display: inline-block;
	}
	
	.btn2 {
	 display: inline-flex;
	 text-align: center;
	 align-content: center;
	 align-items: center;
	 color: white;
	 max-width: 150rpx;
	 cursor: pointer;
	 margin-bottom: 20rpx;
	 margin-right: 373rpx;
	 font-weight: 600;
	}
    
	.editorder{
		display: none;
	}

		  

	.container {
		justify-content: center;
		align-items: center;
		padding: 20px;
		background: rgba(255, 255, 255, 0.0)
	}
	
	.form {
	 
	  margin-bottom: 10px;
	}

    text{
		 color: #000;
		 font-size: 34rpx;
		 font-weight: 900;
	}
    
	
</style>